<style lang="less" scoped>
    .uploadimg {
        width: 100%;
        height: auto;
        .demo-upload-list{
            /*display: inline-block;*/
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 60px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0,0,0,.2);
            margin-right: 4px;
        }
        .demo-upload-list img{
            width: 100%;
            height: 100%;
        }
        .demo-upload-list-cover{
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.6);
        }
        .demo-upload-list:hover .demo-upload-list-cover{
            display: block;
        }
        .demo-upload-list-cover i{
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
        }
    }
</style>
<template>
    <div class="uploadimg">
        <div class="demo-upload-list" v-for="item in uploadList" style="margin-bottom: 10px">
            <template v-if="item.status === 'finished'">
                <img :src="item.url">
                <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
                    <!--<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>-->
                </div>
            </template>
            <template v-else>
                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
        </div>
        <Upload
            :ref="myref"
            :show-upload-list="false"
            :with-credentials="true"
            :default-file-list="defaultList"
            :on-success="handleSuccess"
            :on-error="handleError"
            :format="['jpg','jpeg','png']"
            :max-size="2048"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload"
            multiple
            type="drag"
            :action="action"
            style="width:200px;">
            <div style="height:38px;line-height: 38px;text-align: center">
                <i class="ivu-icon ivu-icon-upload" style="font-size: 20px">上传</i>
            </div>
        </Upload>
        <Modal title="查看图片" v-model="visible">
            <img :src="imgUrl" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
    export default {
        name: 'uploadimg',
        props: {
            action: {
                type: String,
                default: ''
            },
            myref: {
                type: String,
                default: 'upload'
            }
        },
        data () {
            return {
                defaultList: [],
                imgUrl: '',
                visible: false,
                uploadList: []
            }
        },
        watch: {
        },
        computed: {
        },
        methods: {
            cleandefaultList () {
                this.defaultList = []
            },
            handleView (url) {
                this.imgUrl = url;
                this.visible = true;
            },
            handleRemove (file) {
                const fileList = this.$refs[this.myref].fileList;
                this.$refs[this.myref].fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (response, file) {
                console.log(response, file)
                let msg = ''
                switch (response.status) {
                    case 100:
                        this.$refs[this.myref].fileList.length > 1 ? this.$refs[this.myref].fileList.splice(0, 1) : ''
                        file.url = response.data.url
                        file.name = file.name
                        break;
                    case 101:
                        msg = '用户名密码错误'
                        break;
                    case 102:
                        msg = '无效token'
                        break;
                    case 103:
                        msg = '用户名已存在'
                        break;
                    case 105:
                        msg = '采购员已存在'
                        break;
                    case 111:
                        msg = '未知错误'
                        break;
                }
                if (msg != '') {
                    this.$Notice.error({
                        title: msg,
                        desc: ''
                    });
                }
                // this.$refs[this.myref].fileList.length > 1 ? this.$refs[this.myref].fileList.splice(0, 1) : ''
            },
            handleError () {
                this.$Notice.error({
                    title: '上传失败',
                    desc: ''
                });
            },
            handleFormatError (file) {
                /*this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });*/
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: 'Up to five pictures can be uploaded.'
                    });
                }
                return check;
            }
        },
        components: {
        },
        activated: function () {
            console.log('chuangjian  activated')
        },
        mounted: function () {
            console.log('chuangjian  imgupload')
            this.uploadList = this.$refs[this.myref].fileList;
        }
    };
</script>
